Bar Charts

To display a bar chart, use the Chart control and add a BarSeries to the chart. The BarSeries must specify an ItemsSource, which is a collection containing the data to be displayed, and will normally specify a XBinding and a YBinding, which are data bindings specifying how the position and height of the bar are determined from the data.

CopyCreating a bar chart

<ms:Chart Title="Sales" Width="600" Height="400">
  <ms:BarSeries ItemsSource="{Binding}" 
                XBinding="{Binding Quarter}" 
                YBinding="{Binding Amount}" 
                />
</ms:Chart>

If the ItemsSource contains a collection of Point objects, you can omit the XBinding and YBinding.

By default, a BarSeries is displayed using vertical bars, rising or falling from the X axis. To display horizontal bars, set the Orientation property to Horizontal. In this case, the XBinding represents the length of the bars and the YBinding their vertical position.

CopyCreating a horizontal bar chart

<ms:BarSeries ItemsSource="{Binding}" 
              Orientation="Horizontal" 
              YBinding="{Binding TestIndex}" 
              XBinding="{Binding TimeTaken}" 
              />

To change the fill of the bars, use the SeriesBrush property:

CopyColoring the bars solid red

<ms:BarSeries SeriesBrush="Red" />

A chart may contain multiple series. By default, these are identified in the legend as “Series 1,” “Series 2,” etc. To customise the titles, set the Title property:

CopySetting the legend text

<ms:BarSeries ItemsSource="{Binding Predicted}" Title="Predicted sales" SeriesBrush="Gray" />
<ms:BarSeries ItemsSource="{Binding Actual}" Title="Actual sales" SeriesBrush="Blue" />

By default, all series are filled with the same default brush. If you are showing multiple series, be sure to set the SeriesBrush so that users can relate them to the legend.

To use a different fill for each bar, use the Brushes collection:

CopyMy eyes! The goggles do nothing!

<ms:BarSeries>
  <ms:BarSeries.Brushes>
    <SolidColorBrush Color="HotPink" />
    <SolidColorBrush Color="Yellow" />
    <VideoBrush SourceName="psychedelicMediaElement" />
    <SolidColorBrush Color="Lime" />
  </ms:BarSeries.Brushes>
</ms:BarSeries>

If there are more bars than brushes, then the brushes are used in rotation. If you are using multiple brushes, you will typically want the legend to distinguish individual items in the series (otherwise the first brush will be used in the legend, which may confuse users). To do this, use ShowAllLegendItems and DataTitleBinding:

CopyLegend entry for each item

<ms:BarSeries ItemsSource="{Binding}" 
              XBinding="{Binding Quarter}" 
              YBinding="{Binding Amount}" 
              ShowAllLegendItems="True" 
              DataTitleBinding="{Binding Quarter, Converter={StaticResource QuarterName}}" 
              >
  <ms:BarSeries.Brushes>
    <SolidColorBrush Color="HotPink" />
    <SolidColorBrush Color="Yellow" />
    <VideoBrush SourceName="psychedelicMediaElement" />
    <SolidColorBrush Color="Lime" />
  </ms:BarSeries.Brushes>
</ms:BarSeries>

Styling the Bars

To customize the appearance of the bars over and above changing the brush, use the BarStyle property. The target type of the style should be Bar. You will typically set the control Template.

CopyFlat rounded bars

<ms:BarSeries>
  <ms:BarSeries.BarStyle>
    <Style TargetType="ms:Bar">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate>
            <Rectangle RadiusX="4" RadiusY="4" Fill="HotPink" />
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </ms:BarSeries.BarStyle>
</ms:BarSeries>